<template>
  <el-dropdown trigger="click" class="ml8">
        <el-button :loading="loading" size="medium">打印<i class="el-icon-arrow-down el-icon--right"/></el-button>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="print(1)">打印查询结果</el-dropdown-item>
            <el-dropdown-item @click.native="print(2)">打印全部数据</el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
</template>

<script>
import print from 'print-js'
export default {
    props:{
        apiFn:{
            default: () => (()=>{}),
            type: Function,
            required: true
        },
        options:{
            default:()=>({}),
            type: Object,
        },
        properties:{
            default:()=>([]),
            type: Array,
        },
        self:{
            default:false,
            type: Boolean
        },
        dataFn:{
            default: () => (()=>{}),
            type: Function,
        }
    },
    data(){
        return{
            loading:false
        }
    },
    methods:{
        print(i){
            this.loading = true
            let options
            if(i === 1){
                options = {...this.options,allPage: 2,page: null,perPage: null,}
            }else if(i === 2){
                options = {allPage: 2}
            }
            this.apiFn(options).then(({data}) => {
                if(this.self) data = this.dataFn(data)
                print({
                    printable:data,
                    properties:this.properties,
                    type: 'json',
                    gridHeaderStyle: 'border: 1px solid #909399;', //表格头样式
                    gridStyle: 'border: 1px solid #909399; text-align:center;', // 表格体样式
                    style:'@media print{@page {size:landscape}}' //横行打印
                })
            }).finally(()=>{
                this.loading = false
            })
        
        }
    }
}
</script>

<style>

</style>